<template>
  <div id="wzkf">
    <top></top>
    <div class="banner">
      <img src="../assets/bban.png" />
    </div>
    <div class="wzfuwu" v-for="item in dinz" :key="item.id">
      <div class="text">
        <p class="h">{{item.h}}</p>
        <p class="texts">{{item.texts}}</p>
      </div>
      <div class="dingz">
        <dl
          v-for="item in dinzimg"
          :key="item.id"
          @mousemove="jingguo(item.id)"
          @mouseout="likai(item.tex)"
          :class="id==item.id?'shod':''"
        >
          <dt>
            <img :src="item.img" v-show="id!==item.id" />
            <img :src="item.imgs" v-show="id==item.id" />
          </dt>
          <dd :class="id==item.id?'shodc':''">{{item.dd}}</dd>
        </dl>
      </div>
      <div class="gaod" v-for="item in gdex" :key="item.id">
        <div>
          <p>{{item.srtext}}</p>
          <p>{{item.srtexts}}</p>
        </div>
      </div>
    </div>

    <div class="Sgdimg">
      <div
        class="gdimg"
        v-for="itema in gdimg"
        :key="itema.id"
        @mousemove="wenzi(itema.tex)"
        @mouseout="yc(itema.tex)"
      >
        <dl>
          <dt>
            <img :src="itema.img1" />
          </dt>
          <dd v-show="tex==itema.tex">
            <p>{{itema.imgtext1}}</p>
            <p>{{itema.imgtext1s}}</p>
          </dd>
        </dl>
      </div>
    </div>

    <div class="classic" v-for="items in gyy" :key="items.id">
      <div>
        <p>{{items.tx}}</p>
        <p>{{items.txs}}</p>
        <div class="disp1">
          <div class="left">
            <h2>{{items.h1}}</h2>
            <p class="line"></p>
            <p>{{items.h1p}}</p>
          </div>
          <div class="disp1img">
            <img :src="items.img1" />
          </div>
        </div>
        <div class="disp1">
          <div class="disp1img">
            <img :src="items.img1" />
          </div>
          <div class="left">
            <h2>{{items.h1}}</h2>
            <p class="line"></p>
            <p>{{items.h1p}}</p>
          </div>
        </div>
      </div>
    </div>

    <bott></bott>
  </div>
</template>
<script>
import Footer from "@/components/bott.vue";
import Top from "../components/top.vue";
import Bott from "../components/bott.vue";
export default {
  name: "HomeView",
  components: {
    // HelloWorld,
    Footer,
    Top,
    Bott
  },
  data() {
    return {
      // bian: true,
      // wenzi: false,
      id: 0,
      tex: 0,
      dinz: [
        {
          h: "网站服务",
          texts: "更专注精研只为打造建站系统"
        }
      ],
      dinzimg: [
        {
          id: 1,
          img: require("../assets/hei.png"),
          imgs: require("../assets/liang.png"),
          dd: "电商网站定制"
        },
        {
          id: 2,
          img: require("../assets/hei.png"),
          imgs: require("../assets/liang.png"),
          dd: "电商网站定制"
        },
        {
          id: 3,
          img: require("../assets/hei.png"),
          imgs: require("../assets/liang.png"),
          dd: "电商网站定制"
        },
        {
          id: 4,
          img: require("../assets/hei.png"),
          imgs: require("../assets/liang.png"),
          dd: "电商网站定制"
        }
      ],
      gdex: [
        {
          srtext: "高档的私人订制",
          srtexts: "为用广户提供更好体验更合适营销推"
        }
      ],
      gdimg: [
        {
          tex: 1,
          img1: require("../assets/sr1.png"),
          imgtext1: "为用户提供更好体验更适合营销",
          imgtext1s: "文化传媒"
        },
        {
          tex: 2,
          img1: require("../assets/sr2.png"),
          imgtext1: "为用户提供更好体验更适合营销",
          imgtext1s: "文化传媒"
        },
        {
          tex: 3,
          img1: require("../assets/sr3.png"),
          imgtext1: "为用户提供更好体验更适合营销",
          imgtext1s: "文化传媒"
        },
        {
          tex: 4,
          img1: require("../assets/sr4.png"),
          imgtext1: "为用户提供更好体验更适合营销",
          imgtext1s: "文化传媒"
        }
      ],
      gyy: [
        {
          tx: "经典案例",
          txs: "为用户提供更好体验更合适营销推广",
          h1: "网站经典",
          h1p:
            "专注网站建设、网站设计、品牌设计、网络营销、网站托管、整合营销服务为核心服务。专注于创意设计实现商业价值较大化。为所有谋求长远发展的 企业提升品牌品质。拥有经验丰富技术团队，专业的资深设计师。",
          img1: require("../assets/z1.png")
        }
      ]
    };
  },
  methods: {
    jingguo(id) {
      this.id = id;
    },
    likai() {
      this.id = 999;
    },
    wenzi(tex) {
      this.tex = tex;
    },
    yc() {
      this.tex = 999;
    }
  }
};
</script>